<template>
  <div class="review">
    <heads title="评价订单"></heads>
    <div class="main-content">
      <van-form @submit="review">
         <van-cell-group>           
            <van-cell value>
              <template #default>
                <div class="cell-title flex space-between">
                  <div class="img-box flex">
                     <van-image
            round
            width=".56rem"
            height=".56rem"
            :src="userInfo.img"
          />{{ userInfo.name }}
                  </div>
                  <div class="person-check">
                    <van-checkbox v-model="checked">对接单员匿名</van-checkbox>
                  </div>
                </div>
                <div class="item flex">
                  <van-rate v-model="reviewValue" />
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        <van-field
          v-model="feedback"
          type="textarea"
          placeholder="请对我们的师傅做出评价~"
          :rules="[{ required: true, message: '请填写您的评价' }]"
        />
        

        <div class="btn-box">
          <van-button type="info" class="btn-common" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      feedback: "",
      checked:false,
      reviewValue:3,
     
    };
  },
    computed:{
    ...mapState(['userInfo'])

  },
  methods: {
    review() {
      let _this = this;
      let params = {
        id:this.$route.params.id,
        content: this.feedback,
        start:this.reviewValue,
        is_show:this.checked ? '2' : '1'
      };
      _this.$ajax
        .post(`${_this.$baseUrl}/user/comment`, params)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.$toast.success("评价成功!");
            setTimeout(() => {
              _this.$router.go(-1);
            }, 2000);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
  
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.review {
  .main-content {
     min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
 
  .van-cell {
    padding: 0.3rem;
    border-radius: .1rem;
  }
  /deep/ .van-cell-group{
    margin-bottom: .3rem;
    border-radius: .1rem;
    .cell-title{
      font-size: .3rem;
      color: #333;
      .img-box{
        .van-image{
          margin-right: .2rem;

        }
        
      }
      .person-check{
        font-size: .24rem;
        color: #999;
        .van-checkbox__label{
          margin-left: 3px;
          color: #999;
        }
         .van-checkbox__icon{
           height: auto;
           line-height: normal;
           .van-icon{
          width: .28rem;
          height: .28rem;
        }
         }
      }
    }
    .item{
      padding-top: .3rem;
      font-size: .48rem;
      justify-content: center;
    }
  }
  textarea {
    min-height: 5rem;
    
  }
  .btn-box {
    box-sizing: border-box;
    padding-top: 1rem;
    button{
      width: 100%;
      line-height: .88rem;
      background: #34AD2A;
      border-radius: .44rem;
      border-color: #34AD2A;
      box-sizing: border-box;
    }
  }
  /deep/ .van-rate__item:not(:last-child){
    padding-right: .3rem;

}}
</style>
